<template>
    <div class="forget">
        <upNavbar :bgColor="'#fff'"></upNavbar>
        <view class="back">
            <view class="logo">
                <image src="@/static/images/logo.png" alt="" />
                <view class="title">{{ $t('resetyourpassword') }}</view>
            </view>
            <div class="phoneFrom">
                <up-form labelPosition="left" :model="model1" :rules="rules" ref="form1">
                    <up-form-item class="phoneNumber1" label="" prop="userInfo.password" borderBottom ref="item1">
                        <u-input :password="!passShow" v-model="model1.userInfo.password"
                            :placeholder="$t('palceInputPassword')" style="flex: 1;"></u-input>
                        <div class="eyeBox">
                            <up-icon name="eye-fill" size="22" v-if="passShow" @click="passShow = !passShow"></up-icon>
                            <up-icon name="eye-off" size="22" v-else @click="passShow = !passShow"></up-icon>
                        </div>
                    </up-form-item>
                    <up-form-item class="phoneNumber1" label="" prop="userInfo.password2" borderBottom ref="item1">
                        <u-input :password="!passShow2" v-model="model1.userInfo.password2"
                            :placeholder="$t('inputPasswordAgain')" style="flex: 1;"></u-input>
                        <div class="eyeBox">
                            <up-icon name="eye-fill" size="22" v-if="passShow2"
                                @click="passShow2 = !passShow2"></up-icon>
                            <up-icon name="eye-off" size="22" v-else @click="passShow2 = !passShow2"></up-icon>
                        </div>
                    </up-form-item>
                </up-form>
                <div class="logBtn">
                    <u-button type="" :text="t('submit')" :loading="btnloading" @click="nextStep"></u-button>
                </div>
            </div>
        </view>
        <upModal :modalWidth="'14.75rem'" :modalShow="modalShow" :modalTitle="modalTitle" :modalText1="modalText1"
            :showImage="showImage" :isCancel="isCancel" @cloos="cloos">
        </upModal>
        <up-toast ref="uToastRef"></up-toast>
    </div>
</template>

<script setup lang="ts">
import { findPassword, retrievepwdByEP } from '@/api/login.js'
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue'
import upNavbar from '../../components/upNavbar.vue';
import upModal from '@/components/upModal.vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const uToastRef = ref(null)
const subsectionList = ref([t('mobilephone'), t('email')])
const model1 = reactive({
    userInfo: {
        password: '',
        password2: '',
    },
})
const rules = {
    'userInfo.password': [
        {
            type: 'string',
            required: true,
            message: t('passwordcannotbeempty'),
            trigger: ['blur',]
        },
        {
            min: 8,
            max: 16,
            message: t('passwordLengthError'),
            trigger: ['blur',]
        }
    ],
    'userInfo.password2': [
        {
            type: 'string',
            required: true,
            message: t('Theconfirmationpasswordempty'),
            trigger: ['blur',]
        },
        {
            min: 8,
            max: 16,
            message: t('passwordLengthError'),
            trigger: ['blur',]
        }
    ],
}
const forgetParam = ref('');// 使用的手机号/邮箱
const token = ref('');// token
const form1 = ref(null);
const passShow = ref(false)
const passShow2 = ref(false)
const btnloading = ref(false) // 
// 弹窗-头
const modalShow = ref(false) // 弹窗显示状态
const showImage = ref(true) // 是否显示图片
const isCancel = ref(false) // 是否有取消按钮
const isFh = ref(false) // 是否返回登录页
const modalTitle = ref('') // 弹窗标题
const modalText1 = ref('') // 弹窗内容
const cloos = () => {
    modalShow.value = false
    if (isFh.value) {
        uni.navigateTo({
            url: '/pages/login/login',
        })
    }
}
// 弹窗-尾

const nextStep = () => {// 提交
    form1.value.validate().then((valid: any) => {
        if (model1.userInfo.password != model1.userInfo.password2) {
            // uToastRef.value.show({
            //     message: t('passwordNotSame'),
            //     duration: 2000,
            //     type: "default",
            //     icon: "none",
            // })
            modalShow.value = true
            showImage.value = true
            isCancel.value = false
            modalText1.value = t('passwordNotSame')
            return
        }
        if (valid) {
            btnloading.value = true
            let params = {
                epstr: forgetParam.value,
                password: model1.userInfo.password,
                password2: model1.userInfo.password2,
                token: token.value,
            }
            retrievepwdByEP(params).then((res: object) => {
                if (res.code == 200) {
                    // uToastRef.value.show({
                    //     message: t('modificationissuccessful'),
                    //     duration: 2000,
                    //     type: "default",
                    //     icon: "none",
                    // })
                    modalShow.value = true
                    showImage.value = true
                    isCancel.value = false
                    modalText1.value = t('modificationissuccessful')
                    isFh.value = true
                } else if (res.code == 10102017) {// 与原密码一致
                    modalShow.value = true
                    showImage.value = true
                    isCancel.value = false
                    modalText1.value = res.msg
                    // 返回上一个页面
                    uni.navigateBack()
                } else {
                    uToastRef.value.show({
                        message: res.msg,
                        duration: 2000,
                        type: "default",
                        icon: "none",
                    })
                }
            }).catch((err: any) => {
                uToastRef.value.show({
                    message: err.msg,
                    duration: 2000,
                    type: "default",
                    icon: "none",
                })
            }).finally(() => {
                btnloading.value = false
            })
        } else { }
    })
}
onLoad((options: object) => {
    // 从 options 中获取参数
    if (options.number) forgetParam.value = options.number
    if (options.token) token.value = options.token
});
</script>
<style scoped lang="scss">
.forget {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #F4E6E6, #ffffff);

    .back {
        width: 100%;
        position: fixed;
        top: 280rpx;

        .logo {
            text-align: center;
            margin-bottom: 30rpx;

            image {
                width: 240rpx;
                height: 240rpx;
            }

            .title {
                font-weight: bold;
            }
        }


        .phoneFrom {
            width: 85%;
            margin: 0 auto;

            .phoneNumber1 {
                position: relative;

                .eyeBox {
                    position: absolute;
                    right: 20rpx;
                }

                .u-input {
                    background-color: #F2F2F2;
                }

                .u-input--radius {
                    border-radius: 15px;
                }
            }

            .sendCode1 {
                .u-input {
                    background-color: #F2F2F2;
                }

                .u-input--radius {
                    border-radius: 15px 0 0 15px;
                }

                .u-button {
                    border-radius: 0 15px 15px 0;
                }
            }

            .logBtn {
                margin: 0 auto;
                margin-top: 28rpx;
                width: 100%;
                text-align: center;

                .u-button {
                    color: #fff;
                    height: 80rpx;
                    font-weight: 600;
                    border-radius: 10px;
                    background-color: #de868f;
                    border: 1px solid #bbbbbb;
                }

            }
        }
    }
}
</style>